<template>
  <div class="rbac-container">
    <el-container>
      <el-header class="search-header">
        <div class="header-top">
          <div class="title-group">
            <h2 class="page-title">工艺详情</h2>
          </div>
          <div class="button-group">
            <el-button @click="handleEdit">编辑</el-button>
            <el-button @click="handlePrint">打印</el-button>
            <el-button @click="handleBack">返回</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="data-main">
        <!-- 基础信息 -->
        <div class="info-section">
          <h3 class="section-title">◆ 基础信息</h3>
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="info-item">
                <label>工艺流程编号：</label>
                <span>{{ processFlowDetail.processCode || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>工艺流程名称：</label>
                <span>{{ processFlowDetail.processName || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="info-item">
                <label>所属部门：</label>
                <span>{{ processFlowDetail.departmentName || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>负责人：</label>
                <span>{{ processFlowDetail.responsibleName || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="info-item">
                <label>备注：</label>
                <span>{{ processFlowDetail.processRemark || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>状态：</label>
                <el-tag :type="processFlowDetail.processStatus === 1 ? 'success' : 'info'">
                  {{ processFlowDetail.processStatus === 1 ? '启用' : '禁用' }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 加工工序 -->
        <div class="operation-section">
          <h3 class="section-title">◆ 加工工序</h3>
          <div class="operation-actions">
            <el-button type="primary" size="small">导出</el-button>
          </div>
          <el-table :data="processOperations" class="data-table" :border="true" :stripe="true">
            <el-table-column type="index" label="序号" width="80px" align="center"/>
            <el-table-column prop="operationId" label="工序" width="100px" align="center"/>
            <el-table-column prop="operationName" label="加工工序" min-width="150px"/>
            <el-table-column prop="operationCode" label="工序编码" width="120px" align="center"/>
            <el-table-column prop="operationName" label="工序名称" width="120px"/>
            <el-table-column label="操作" width="100px" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 附件 -->
        <div class="attachment-section">
          <h3 class="section-title">◆ 附件</h3>
          <div class="attachment-list">
            <div 
              v-for="(attachment, index) in attachments" 
              :key="index" 
              class="attachment-item"
            >
              <div class="attachment-info">
                <h4>{{ attachment.name }}</h4>
                <p>文件大小：{{ attachment.size }}</p>
                <p>上传时间：{{ attachment.uploadTime }}</p>
              </div>
              <div class="attachment-actions">
                <el-button link type="primary" @click="handlePreview(attachment)">查看</el-button>
                <el-button link type="primary" @click="handleDownload(attachment)">下载</el-button>
              </div>
            </div>
            <div v-if="attachments.length === 0" class="no-attachment">
              暂无附件
            </div>
          </div>
        </div>

        <!-- 关闭按钮 -->
        <div class="bottom-actions">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { getProcessFlowDetailById } from '@/Https/server';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();

// 工艺流程详情数据
const processFlowDetail = ref<any>({});
// 工序数据
const processOperations = ref<any>([]);
// 附件数据
const attachments = ref<any>([]);

onMounted(() => {
  const processFlowId = route.params.id as string;
  if (processFlowId) {
    getProcessFlowDetail(processFlowId);
  }
});

// 获取工艺流程详情
const getProcessFlowDetail = (id: string) => {
  getProcessFlowDetailById({ processFlowId: id }).then((res: any) => {
    console.log('工艺流程详情数据:', res);
    if (res.code === 200) {
      processFlowDetail.value = res.data;
      processOperations.value = res.data.processOperations || [];
      // 处理附件数据
      attachments.value = (res.data.attachments || []).map((attachment: any) => ({
        id: attachment.id,
        name: attachment.filename,
        size: formatFileSize(attachment.filesize),
        uploadTime: formatDateTime(attachment.uploadtime),
        filepath: attachment.filepath,
        entityType: attachment.entitytype,
        entityId: attachment.entityid
      }));
    } else {
      ElMessage.error(res.message || '获取工艺流程详情失败');
    }
  }).catch((error: any) => {
    console.error('获取工艺流程详情失败:', error);
    ElMessage.error('获取工艺流程详情失败，请稍后重试');
  });
};

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 bytes';
  const k = 1024;
  const sizes = ['bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 格式化日期时间
const formatDateTime = (dateString: string) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 编辑按钮
const handleEdit = () => {
  const processFlowId = route.params.id as string;
  router.push(`/EditProcessFlow/${processFlowId}`);
};

// 打印按钮
const handlePrint = () => {
  ElMessage.info('打印功能待开发');
};

// 返回按钮
const handleBack = () => {
  router.back();
};

// 关闭按钮
const handleClose = () => {
  router.push('/ShowProcessFlows');
};

// 预览附件
const handlePreview = (attachment: any) => {
  ElMessage.info('预览功能待开发');
  console.log('预览附件:', attachment);
};

// 下载附件
const handleDownload = (attachment: any) => {
  ElMessage.info('下载功能待开发');
  console.log('下载附件:', attachment);
};
</script>

<style scoped>
.rbac-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.search-header {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 15px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-group {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 500;
}

.button-group {
  display: flex;
  gap: 10px;
}

.data-main {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 500px;
}

.info-section, .operation-section, .attachment-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 15px;
  font-weight: 600;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: 500;
  color: #606266;
  min-width: 120px;
  margin-right: 10px;
}

.info-item span {
  color: #303133;
}

.operation-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.data-table {
  margin-bottom: 15px;
}

.attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.attachment-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  background-color: #fafafa;
}

.attachment-info h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #303133;
}

.attachment-info p {
  margin: 5px 0;
  font-size: 12px;
  color: #909399;
}

.attachment-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.no-attachment {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 40px;
  grid-column: 1 / -1;
}

.bottom-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}
</style> 